<template>
  <el-dialog
    title="图片裁剪"
    :visible.sync="dialogVisible"
    width="1200px"
    :close-on-click-modal="false"
    :lock-scroll="false"
    append-to-body
  >
    <el-row :gutter="20">
      <el-col :span="16">
        <div style="height: 600px">
          <!-- <vueCropper
        ref="cropper"
        :img="option.img"
        :outputSize="option.size"
        :outputType="option.outputType"
        :info="true"
        :full="option.full"
        :canMove="option.canMove"
        :canMoveBox="option.canMoveBox"
        :original="option.original"
        :autoCrop="option.autoCrop"
        :autoCropWidth="option.autoCropWidth"
        :autoCropHeight="option.autoCropHeight"
        :fixedBox="option.fixedBox"
        @realTime="realTime"
        :fixed="option.fixed"
        :fixedNumber="fixedNumber"
      ></vueCropper> -->
          <vue-cropper
            autoCrop
            ref="cropper"
            :img="option.img"
            :outputType="option.outputType"
            :autoCropWidth="option.autoCropWidth"
            :autoCropHeight="option.autoCropHeight"
            :fixed="option.fixed"
            :fixedNumber="option.fixedNumber"
            @realTime="realTime"
            centerBox
          />
        </div>
      </el-col>
      <el-col
        :span="8"
        class="cropper-set"
        v-if="previews && previews.hasOwnProperty('img')"
      >
        <!-- 图片预览 -->
        <div class="show-preview" :style="previewStyle">
          <div :style="previews.div" class="preview">
            <img :src="previews.url" :style="previews.img" />
          </div>
        </div>
        <!-- 图片放缩旋转 -->
        <div class="cropper-btns">
          <p>操作</p>
          <el-button
            size="medium"
            type="primary"
            icon="el-icon-zoom-in"
            @click="changeScale(2)"
          ></el-button>
          <el-button
            size="medium"
            type="primary"
            icon="el-icon-zoom-out"
            @click="changeScale(-2)"
          ></el-button>
          <el-button
            size="medium"
            type="primary"
            icon="el-icon-refresh-left"
            @click="rotateLeft"
          ></el-button>
          <el-button
            size="medium"
            type="primary"
            icon="el-icon-refresh-right"
            @click="rotateRight"
          ></el-button>
        </div>
      </el-col>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="getCropData">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: false,
      previews: '',
      option: {
        img: '', // 裁剪图片的地址  (默认：空)
        size: 1, // 裁剪生成图片的质量  (默认:1)
        full: true, // 是否输出原图比例的截图 选true生成的图片会非常大  (默认:false)
        outputType: 'png', // 裁剪生成图片的格式  (默认:jpg)
        canMove: true, // 上传图片是否可以移动  (默认:true)
        original: false, // 上传图片按照原始比例渲染  (默认:false)
        canMoveBox: true, // 截图框能否拖动  (默认:true)
        autoCrop: true, // 是否默认生成截图框  (默认:false)
        autoCropWidth: 370, // 默认生成截图框宽度  (默认:80%)
        autoCropHeight: 222, // 默认生成截图框高度  (默认:80%)
        fixedBox: false, // 固定截图框大小 不允许改变  (默认:false)
        fixed: true, // 是否开启截图框宽高固定比例  (默认:true)
        fixedNumber: [1, 0.6], // 截图框比例  (默认:[1:1])
      },
      previewStyle: {
        width: '100%',
        height: '400px',
        overflow: 'hidden',
        display: 'flex',
        'align-items': 'center',
      },
    }
  },
  mounted() {
    this.$bus.$on('showCropperDialog', (v) => {
      if (v.indexOf('http') == -1) {
        this.option.img = v
        this.dialogVisible = true
      } else {
        this.warnMsg('图片格式不支持裁切')
      }
      return
    })
  },
  beforeDestroy() {
    this.$bus.$off('showCropperDialog')
  },
  methods: {
    // 裁切
    getCropData() {
      this.$refs.cropper.getCropData((data) => {
        this.$emit('e-emit', data)
        this.dialogVisible = false
      })
    },
    changeScale(num) {
      // 图片缩放
      num = num || 1
      this.$refs.cropper.changeScale(num)
    },
    rotateLeft() {
      // 向左旋转
      this.$refs.cropper.rotateLeft()
    },
    rotateRight() {
      // 向右旋转
      this.$refs.cropper.rotateRight()
    },
    realTime(data) {
      // 实时预览
      this.previews = data
    },
  },
}
</script>
<style scoped lang="scss">
.cropper-set {
  p {
    line-height: 2;
  }
}
.show-preview {
  flex: 1;
  -webkit-flex: 1;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  -webkit-justify-content: center;
  overflow: hidden;
  border: 1px solid #ddd;
  background-color: #fafafa;
  border-radius: 5px;
}
.preview {
  overflow: hidden;
  border-radius: 3px;
  border: 1px solid #eee;
}
</style>